<template>
    <div>
        <FutureTableTroor ref="xToolbar">
            <template v-slot:buttons>
                <a-button type="primary" ghost>提示(10000条数据)</a-button>
            </template>
        </FutureTableTroor>
        <FutureTable ref="xTable1" :data="data" :options="options" :rowCofig="{
            highlight: false
        }" ids="id" height="70vh">
            <template v-slot:caozuo>
                <a-button>编辑</a-button>
                <a-button>添加</a-button>
            </template>
        </FutureTable>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, provide } from 'vue';
import type { Ref } from 'vue';
const dataLie = ref<any>([])
const xTable1: Ref<any | null | undefined> = ref()
const xToolbar: Ref<any | null | undefined> = ref()
// 关联
nextTick(() => {
    setTimeout(() => {
        // 将表格和工具栏进行关联
        const $table = xTable1.value;
        const $toolbar = xToolbar.value;
        $table.connect($toolbar);
    }, 0)
});

const options: any = {
    column: [
        {
            prop: 'id',
            title: 'Id',
        },
        {
            prop: 'names',
            title: '姓名'
        },
        {
            prop: 'age',
            title: '年龄'
        },
        {
            prop: 'sex',
            title: '性别'
        },
        {
            prop: 'address',
            title: '地址'
        },
        {
            prop: 'caozuo',
            title: '操作'
        }
    ]
}
provide('FutreTable', dataLie)

const data = ref<any>([{
    id: '15',
    names: '张三',
    age: 18,
    sex: '女',
    address: '中国第一龙江市',
}
])



onMounted(() => {
    for (let index = 0; index < 10000; index++) {
        data.value.push({
            id: index,
            names: '张三',
            age: 18,
            sex: '女',
            address: '中国第一龙江市',
        })
    }
})

</script>

<style scoped lang="scss"></style>